<template>
  <div>
    <!--表格对象-->
    <Table
      :table="table"
      :query="query"
      :tableColumns="tableColumns"
      :loadTableList="loadTableList"
      :changePageSize="changePageSize"
      :changePage="changePage"
      :deleteMultipleSelectionUrl="$urls.API_URL_BACKSTAGE_USER_MANAGE"
      :showTableIndex="false"
      :operatorColumnWidth="operatorColumnWidth"
      :importUrl="$urls.API_URL_BACKSTAGE_USER_MANAGE_IMPORT"
      importButtonText="导入数据"
      :downloadTemplateUrl="$urls.API_URL_BACKSTAGE_USER_MANAGE_DOWNLOADTEMPLATE"
      templateFileName="导入账户数据模板.xlsx"
      :downloadUrl="$urls.API_URL_BACKSTAGE_USER_MANAGE_DOWNLOAD"
      dataFileName="账户信息表.xlsx"
      @addRow="addRow"
      @selectionChange="handleSelectionChange"
      @editRow="editRow"
    >
      <!--      <template #toorbar_left_right>-->
      <!--        <el-button :disabled="!multipleSelection.length" icon="circle-close" style="margin:0 5px 0 0;" @click="updateRoleEnabled(true)">状态变更</el-button>-->
      <!--      </template>-->
      <template #departmentName="scope">
        {{ scope.row.department.name }}
      </template>
      <!--账户状态-->
      <template #status="scope">
        <el-tag
          :type="`${scope.row.status==0 ? 'info':scope.row.status==1 ? 'success' : 'danger'}`">{{
            dictToMap(userStatusDict)
              .get(scope.row.status)
          }}
        </el-tag>
      </template>
      <template #table_operator_right="scope">
        <el-popconfirm
          v-if="showPermissionViewButton"
          confirm-button-text="权限预览"
          cancel-button-text="菜单预览"
          confirmButtonType="default"
          cancelButtonType="default"
          title="请选择预览方式"
          icon="InfoFilled"
          @confirm="permissionView(scope.row.id)"
          @cancel="menuView(scope.row.id)"
        >
          <template #reference>
            <el-button type="primary" size="small" icon="Grid" plain>权限预览</el-button>
          </template>
        </el-popconfirm>
        <el-button v-if="showUploadPhotoButton" @click="uploadPhoto(scope.row.id)" type="primary"
                   size="small" icon="User" plain>上传头像
        </el-button>
      </template>
      <!--      <template #table_operator_right="scope">-->
      <!--        <el-button  type="primary"  size="small" icon="delete" plain @click="menuManage(scope.row.id)">角色分配</el-button>-->
      <!--      </template>-->
    </Table>
    <!-- 头像上传表单 -->
    <PhotoUploadDialog
      ref="photoUploadDialogRef"
      title="头像上传"
      :autoUpload="false"
      :limit="3"
      @uploadSuccess="uploadImgSuccess"
    />
  </div>
</template>

<script lang="ts" setup>
import {
  defineProps, getCurrentInstance, onBeforeMount, onMounted, ref, withDefaults,
} from 'vue';
// 导入表格组件
import Table from '@/components/base/table/Table.vue';
// 导入上传图像组件
import PhotoUploadDialog from '@/components/base/dialog/PhotoUploadDialog.vue';
// 导入字典中的性别
import {
  userStatusDict, dictToMap, yesOrNoDict, getDict, Option,
} from '@/api/dict';
import { TableColumn } from '@/types/interface/base_interface';
import { Role } from '@/types/interface/auth_interface';

const { proxy } = getCurrentInstance();

interface Props {// 需要在父组件引入自定义的@/api/uem/useTableList.ts组件，然后将其中的部分属性传过来
  query: Record<string, any>, // 查询表单对象
  table: any, // 表格对象，包含表格数据和分页信息。表格数据实际业务并不需要，偷懒写法
  loadTableList: () => void, // 重新加载表格
  changePageSize: () => void, // 当每页数据显示数发生变化时触发的一个函数
  changePage: () => void, // 当页面发生变化时触发的一个函数
  showUploadPhotoButton?: boolean, // 是否显示头像上传按钮
  showPermissionViewButton?: boolean, // 是否显示权限预览按钮
  operatorColumnWidth?: number, // 表格操作列宽度
}

const props = withDefaults(defineProps<Props>(), {
  showUploadPhotoButton: true,
  showPermissionViewButton: true,
});
// 初始化性别字典
const sexDict:Option[] = await getDict('用户性别', 'number');
// 定义表格所有的列字段信息
const tableColumns = ref<TableColumn[]>([
  {
    label: '头像',
    prop: 'headImgUrl',
    fixed: true,
    type: 'image',
    width: 100,
  },
  {
    label: '账户名',
    prop: 'username',
    fixed: true,
    width: 150,
  },
  {
    label: '部门名称',
    prop: 'departmentName', // department.name关联属性不能直接传到自定义表格插件显示，需要使用自定义方式来显示
    width: 150,
    type: 'custom',
  },
  {
    label: '姓名',
    prop: 'nickName',
    width: 150,
  },
  {
    label: '性别',
    prop: 'sex',
    width: 60,
    type: 'dict',
    dict: sexDict,
  },
  {
    label: '状态',
    prop: 'status',
    width: 100,
    type: 'custom',
  },
  {
    label: '角色数量',
    prop: 'roleNumber',
    width: 90,
  },
  {
    label: '权限数量',
    prop: 'permissionNumber',
    width: 90,
  },
  {
    label: '创建时间',
    prop: 'createTime',
    width: 180,
  },
]);

// 当表格复选框改变
const multipleSelection = ref<Role[]>([]); // 复选框选择的记录row
const handleSelectionChange = (selection: []) => { // 当选择项发生变化时会触发该事件，这里用于获取选择的记录（多选）.value可以获取所有选择了的行记录row
  multipleSelection.value = selection;
};

// 点击添加按钮，交由父组件处理
const addRow = () => {
  proxy.$emit('addRow', true);
};

// 编辑按钮操作
const editRow = (row: Role): void => {
  proxy.$emit('editRow', row);
};

// 权限预览
const permissionView = (userId: number) => {
  proxy.$emit('permissionView', userId);
};

// 菜单预览
const menuView = (userId: number) => {
  proxy.$emit('menuView', userId);
};

// 头像上传
const photoUploadDialogRef = ref();
// 当点击头像上传按钮时
const uploadPhoto = (userId: number) => {
  // 设置头像上传地址
  let uploadImgUrl = proxy.$urls.API_URL_BACKSTAGE_USER_UPLOAD_PERSON_PHOTO.replace('{userId}', userId);
  photoUploadDialogRef.value.openDialog(uploadImgUrl);
};
// 当头像上传成功
const uploadImgSuccess = () => {
  // 重新加载表格
  props.loadTableList();
};

</script>
<style lang="scss" scoped>

</style>
